<div class="settings-panel">
	<div class="mt-4 d-table w-100 px-5">
		<div class="d-table-cell align-middle">
			<h5 class="p-0">
				App Layout
			</h5>
		</div>
	</div>
	<div class="list" id="fh">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="header-function-fixed"></a>
		<span class="onoffswitch-title">Fixed Header</span>
		<span class="onoffswitch-title-desc">header is in a fixed at all times</span>
	</div>
	<div class="list" id="nff">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-function-fixed"></a>
		<span class="onoffswitch-title">Fixed Navigation</span>
		<span class="onoffswitch-title-desc">left panel is fixed</span>
	</div>
	<div class="list" id="nfm">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-function-minify"></a>
		<span class="onoffswitch-title">Minify Navigation</span>
		<span class="onoffswitch-title-desc">Skew nav to maximize space</span>
	</div>
	<div class="list" id="nfh">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-function-hidden"></a>
		<span class="onoffswitch-title">Hide Navigation</span>
		<span class="onoffswitch-title-desc">roll mouse on edge to reveal</span>
	</div>
	<div class="list" id="nft">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-function-top"></a>
		<span class="onoffswitch-title">Top Navigation</span>
		<span class="onoffswitch-title-desc">Relocate left pane to top</span>
	</div>
	<div class="list" id="fff">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="footer-function-fixed"></a>
		<span class="onoffswitch-title">Fixed Footer</span>
		<span class="onoffswitch-title-desc">page footer is fixed</span>
	</div>
	<div class="list" id="mmb">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-main-boxed"></a>
		<span class="onoffswitch-title">Boxed Layout</span>
		<span class="onoffswitch-title-desc">Encapsulates to a container</span>
	</div>
	<div class="expanded">
		<ul class="mb-3 mt-1">
			<li>
				<div class="bg-fusion-50" data-action="toggle" data-class="mod-bg-1"></div>
			</li>
			<li>
				<div class="bg-warning-200" data-action="toggle" data-class="mod-bg-2"></div>
			</li>
			<li>
				<div class="bg-primary-200" data-action="toggle" data-class="mod-bg-3"></div>
			</li>
			<li>
				<div class="bg-success-300" data-action="toggle" data-class="mod-bg-4"></div>
			</li>
			<li>
				<div class="bg-white border" data-action="toggle" data-class="mod-bg-none"></div>
			</li>
		</ul>
		<div class="list" id="mbgf">
			<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
				data-class="mod-fixed-bg"></a>
			<span class="onoffswitch-title">Fixed Background</span>
		</div>
	</div>
	<div class="mt-4 d-table w-100 px-5">
		<div class="d-table-cell align-middle">
			<h5 class="p-0">
				Mobile Menu
			</h5>
		</div>
	</div>
	<div class="list" id="nmp">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-mobile-push"></a>
		<span class="onoffswitch-title">Push Content</span>
		<span class="onoffswitch-title-desc">Content pushed on menu reveal</span>
	</div>
	<div class="list" id="nmno">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-mobile-no-overlay"></a>
		<span class="onoffswitch-title">No Overlay</span>
		<span class="onoffswitch-title-desc">Removes mesh on menu reveal</span>
	</div>
	<div class="list" id="sldo">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="nav-mobile-slide-out"></a>
		<span class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span>
		<span class="onoffswitch-title-desc">Content overlaps menu</span>
	</div>
	<div class="mt-4 d-table w-100 px-5">
		<div class="d-table-cell align-middle">
			<h5 class="p-0">
				Accessibility
			</h5>
		</div>
	</div>
	<div class="list" id="mbf">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-bigger-font"></a>
		<span class="onoffswitch-title">Bigger Content Font</span>
		<span class="onoffswitch-title-desc">content fonts are bigger for readability</span>
	</div>
	<div class="list" id="mhc">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-high-contrast"></a>
		<span class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
		<span class="onoffswitch-title-desc">4.5:1 text contrast ratio</span>
	</div>
	<div class="list" id="mcb">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-color-blind"></a>
		<span class="onoffswitch-title">Daltonism <sup>(beta)</sup> </span>
		<span class="onoffswitch-title-desc">color vision deficiency</span>
	</div>
	<div class="list" id="mpc">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-pace-custom"></a>
		<span class="onoffswitch-title">Preloader Inside</span>
		<span class="onoffswitch-title-desc">preloader will be inside content</span>
	</div>
	<div class="list" id="mpi">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-panel-icon"></a>
		<span class="onoffswitch-title">SmartPanel Icons (not Panels)</span>
		<span class="onoffswitch-title-desc">smartpanel buttons will appear as icons</span>
	</div>
	<div class="mt-4 d-table w-100 px-5">
		<div class="d-table-cell align-middle">
			<h5 class="p-0">
				Global Modifications
			</h5>
		</div>
	</div>
	<div class="list" id="mcbg">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-clean-page-bg"></a>
		<span class="onoffswitch-title">Clean Page Background</span>
		<span class="onoffswitch-title-desc">adds more whitespace</span>
	</div>
	<div class="list" id="mhni">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-hide-nav-icons"></a>
		<span class="onoffswitch-title">Hide Navigation Icons</span>
		<span class="onoffswitch-title-desc">invisible navigation icons</span>
	</div>
	<div class="list" id="dan">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-disable-animation"></a>
		<span class="onoffswitch-title">Disable CSS Animation</span>
		<span class="onoffswitch-title-desc">Disables CSS based animations</span>
	</div>
	<div class="list" id="mhic">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-hide-info-card"></a>
		<span class="onoffswitch-title">Hide Info Card</span>
		<span class="onoffswitch-title-desc">Hides info card from left panel</span>
	</div>
	<div class="list" id="mlph">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
			data-class="mod-lean-subheader"></a>
		<span class="onoffswitch-title">Lean Subheader</span>
		<span class="onoffswitch-title-desc">distinguished page header</span>
	</div>
	<div class="list" id="mnl">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-link"></a>
		<span class="onoffswitch-title">Hierarchical Navigation</span>
		<span class="onoffswitch-title-desc">Clear breakdown of nav links</span>
	</div>
	<div class="list" id="mdn">
		<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-dark"></a>
		<span class="onoffswitch-title">Dark Navigation</span>
		<span class="onoffswitch-title-desc">Navigation background is darkend</span>
	</div>
	<hr class="mb-0 mt-4">
	<div class="mt-4 d-table w-100 pl-5 pr-3">
		<div class="d-table-cell align-middle">
			<h5 class="p-0">
				Global Font Size
			</h5>
		</div>
	</div>
	<div class="list mt-1">
		<div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
			<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm"
				data-target="html">
				<input type="radio" name="changeFrontSize"> SM
			</label>
			<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text" data-target="html">
				<input type="radio" name="changeFrontSize" checked=""> MD
			</label>
			<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg"
				data-target="html">
				<input type="radio" name="changeFrontSize"> LG
			</label>
			<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl"
				data-target="html">
				<input type="radio" name="changeFrontSize"> XL
			</label>
		</div>
		<span class="onoffswitch-title-desc d-block mb-0">Change <strong>root</strong> font size to effect rem
			values (resets on page refresh)</span>
	</div>
	<hr class="mb-0 mt-4">
	<div class="mt-4 d-table w-100 pl-5 pr-3">
		<div class="d-table-cell align-middle">
			<h5 class="p-0 pr-2 d-flex">
				Theme colors 
				<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-original-title="<span class='text-primary'><i class='@(Settings.Theme.IconPrefix) fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="@(Settings.Theme.IconPrefix) fa-info-circle mr-1"></i> more info</a>
			</h5>
		</div>
	</div>
	<div class="expanded theme-colors pl-5 pr-3">
		<ul class="m-0">
			<li>
				<a href="#"
				   id="myapp-0"
				   data-action="theme-update"
				   data-themesave
				   data-theme=""
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Wisteria (base css)"
				   data-original-title="Wisteria (base css)"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-1"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-1.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Tapestry"
				   data-original-title="Tapestry"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-2"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-2.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Atlantis"
				   data-original-title="Atlantis"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-3"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-3.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Indigo"
				   data-original-title="Indigo"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-4"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-4.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Dodger Blue"
				   data-original-title="Dodger Blue"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-5"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-5.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Tradewind"
				   data-original-title="Tradewind"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-6"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-6.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Cranberry"
				   data-original-title="Cranberry"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-7"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-7.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Oslo Gray"
				   data-original-title="Oslo Gray"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-8"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-8.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Chetwode Blue"
				   data-original-title="Chetwode Blue"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-9"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-9.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Apricot"
				   data-original-title="Apricot"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-10"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-10.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Blue Smoke"
				   data-original-title="Blue Smoke"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-11"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-11.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Green Smoke"
				   data-original-title="Green Smoke"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-12"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-12.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Wild Blue Yonder"
				   data-original-title="Wild Blue Yonder"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-13"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-13.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Emerald"
				   data-original-title="Emerald"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-14"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-14.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Supernova"
				   data-original-title="Supernova"></a>
			</li>
			<li>
				<a href="#"
				   id="myapp-15"
				   data-action="theme-update"
				   data-themesave
				   data-theme="/css/themes/cust-theme-15.css"
				   data-toggle="tooltip"
				   data-placement="top"
				   title="Hoki"
				   data-original-title="Hoki"></a>
			</li>
		</ul>
	</div>
	<hr class="mb-0 mt-4">
	<div class="mt-4 d-table w-100 pl-5 pr-3">
		<div class="d-table-cell align-middle">
			<h5 class="p-0 pr-2 d-flex">
				Theme Modes (beta)
				<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-original-title="<span class='text-primary'><i class='@(Settings.Theme.IconPrefix) fa-question-circle mr-1'></i> Why beta?</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="@(Settings.Theme.IconPrefix) fa-question-circle mr-1"></i> why beta?</a>
			</h5>
		</div>
	</div>
	<div class="pl-5 pr-3 py-3">
		<div class="ie-only alert alert-warning d-none">
			<h6>Internet Explorer Issue</h6>
			This particular component may not work as expected in Internet Explorer. Please use with caution.
		</div>
		<div class="row no-gutters">
			<div class="col-4 pr-2 text-center">
				<div 
					id="skin-default" 
					data-action="toggle-replace" data-replaceclass="mod-skin-light mod-skin-dark" data-class="" 
					data-toggle="tooltip" 
					data-placement="top" 
					title="" 
					class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" 
					data-original-title="Default Mode"
					style="height: 80px">
					<div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
					<div class="d-flex flex-column flex-1">
						<div class="bg-white border-bottom border-primary py-1"></div>
						<div class="bg-faded flex-1 pt-3 pb-3 px-2">
							<div class="py-3" style="background:url('/img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
						</div>
					</div>
				</div>
				Default
			</div>
			<div class="col-4 px-1 text-center">
				<div 
					id="skin-light" 
					data-action="toggle-replace" data-replaceclass="mod-skin-dark" data-class="mod-skin-light" 
					data-toggle="tooltip" 
					data-placement="top" 
					title="" 
					class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on" 
					data-original-title="Light Mode"
					style="height: 80px">
					<div class="bg-white px-2 pt-0 border-right border-"></div>
					<div class="d-flex flex-column flex-1">
						<div class="bg-white border-bottom border- py-1"></div>
						<div class="bg-white flex-1 pt-3 pb-3 px-2">
							<div class="py-3" style="background:url('/img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
						</div>
					</div>
				</div>
				Light
			</div>
			<div class="col-4 pl-2 text-center">
				<div 
					id="skin-dark" 
					data-action="toggle-replace" data-replaceclass="mod-skin-light" data-class="mod-skin-dark" 
					data-toggle="tooltip" 
					data-placement="top" 
					title="" 
					class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on" 
					data-original-title="Dark Mode"
					style="height: 80px">
					<div class="bg-fusion-500 px-2 pt-0 border-right"></div>
					<div class="d-flex flex-column flex-1">
						<div class="bg-fusion-600 border-bottom py-1"></div>
						<div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
							<div class="py-3 opacity-30" style="background:url('/img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
						</div>
					</div>
				</div>
				Dark
			</div>
		</div>
	</div>
	<hr class="mb-0 mt-4">
	<div class="pl-5 pr-3 py-3 bg-faded">
		<div class="row no-gutters">
			<div class="col-6 pr-1">
				<a href="#" class="btn btn-outline-danger fw-500 btn-block" data-action="app-reset">Reset Settings</a>
			</div>
			<div class="col-6 pl-1">
				<a href="#" class="btn btn-danger fw-500 btn-block" data-action="factory-reset">Factory Reset</a>
			</div>
		</div>
	</div>
</div>